<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>活动管理</span>
                <div style="display: flex">
                    <div class="mt-4">
                        <el-input v-model="aName" placeholder="请输入关键字" class="input-with-select">
                            <template #append>
                                <el-button @click="btn_loadbyname" :icon="Search" />
                            </template>
                        </el-input>
                    </div>
                    <el-button style="margin-left:20px" type="success" :icon="Plus" @click="btn_add">新增</el-button>
                </div>
            </div>
        </template>
        <el-config-provider :locale="locale">

            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%" height="400" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="活动编号" width="90px" fixed />
                <el-table-column prop="activityName" label="活动名称" width="200px" fixed />
                <el-table-column prop="image" label="活动图片" width="150%">
                    <template #default="scope">
                        <el-image :src="scope.row.image" style="width: 100%;height: 92px;"
                            :preview-src-list="[scope.row.image]" />
                    </template>
                </el-table-column>
                <el-table-column prop="activityType" label="活动类别" width="120px">
                    <template #default="scope">
                        {{
                            scope.row.activityType.type
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="activityDate" label="活动日期" sortable width="150px" />
                <el-table-column prop="startTime" label="开始时间" sortable width="120px" />
                <el-table-column prop="endTime" label="结束时间" sortable width="120px" />
                <el-table-column prop="activityAddress" label="活动地点" width="200px" />
                <el-table-column prop="dId" label="负责人" width="75px">
                    <template #default="scope">
                        {{
                            scope.row.director.name
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="dId" label="联系电话" width="150px">
                    <template #default="scope">
                        {{
                            scope.row.director.telephone
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="limitNum" label="报名人数限制" width="120px" />
                <el-table-column prop="signNum" label="已报名人数" width="120px" />
                <el-table-column prop="activityPoint" label="活动积分" />
                <el-table-column prop="state" label="状态" :filters="[
                    { text: '已取消', value: 0 },
                    { text: '未开始', value: 1 },
                    { text: '报名中', value: 2 },
                    { text: '已结束', value: 3 },
                ]" :filter-method="filterState" filter-placement="bottom-end" width="120px">
                    <template #default="scope">
                        <p v-if="scope.row.state == '0'" style="color: #ff0000"><el-icon :style="iconStyle">
                                <CircleClose />
                            </el-icon>已取消</p>
                        <p v-if="scope.row.state == '1'" style="color: #ffa500"><el-icon :style="iconStyle">
                                <Warning />
                            </el-icon>未开始</p>
                        <p v-if="scope.row.state == '2'" style="color: #67c23a"><el-icon :style="iconStyle">
                                <EditPen />
                            </el-icon>报名中</p>
                        <p v-if="scope.row.state == '3'" style="color: #67c23a"><el-icon :style="iconStyle">
                                <Lock />
                            </el-icon>已结束</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180px">
                    <template #default="scope">
                        <el-button size="small" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="primary" @click="toTable(scope.$index, scope.row)">报名表</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <ActivityDialog />
            <SignedDialog />
            <!-- 分页 -->
            <div style="text-align: -webkit-center">
                <el-pagination v-model:current-page="currentPage" :page-size="3" v-model:total="total" :pager-count="10"
                    :background="background" layout="prev, pager, next, jumper,total" @current-change="handleChange"
                    style="width: max-content;margin-top: 30px" />
            </div>
        </el-config-provider>
    </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { CircleClose, Warning, EditPen, Lock, Search } from '@element-plus/icons-vue'
import ActivityDialog from './ActivityDialog.vue'
import SignedDialog from './SignedDialog.vue'
//pinia
import { storeToRefs } from 'pinia'
import { useActivityStore } from "../../../stores/activity"
import { useMyactivityStore } from "../../../stores/myactivity.js";
const activityStore = useActivityStore()
const myactivityStore = useMyactivityStore()

//分页控制
const background = ref(true)
const { aName, tableData, currentPage, total } = storeToRefs(activityStore)
const handleChange = (currentPage) => {
    activityStore.currentPage = currentPage
    activityStore.selectAllByPage()
}
activityStore.selectAllByPage()

//搜索
const btn_loadbyname = () => {
    activityStore.loadbyname()
}

const btn_add = () => {
    activityStore.preInfo4Add()
}

const handleEdit = (index, row) => {
    activityStore.preInfo4Edit(index, row)
}

//报名表
const toTable = (index, row) => {
    myactivityStore.pre4UserList(index, row)
    console.log(row);
}

//语言
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : ''
}

const size = ref('')
const iconStyle = computed(() => {
    const marginMap = {
        large: '10px',
        default: '6px',
        small: '4px'
    }
    return {
        marginRight: marginMap[size.value] || marginMap.default
    }
})

//按活动状态筛选
const filterState = (value, row) => {
    return row.state === value
}

</script>

<style scoped>
.box-card {
    width: 99%;
    height: 94%;
    /* margin-top: 12px; */
    border-radius: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

/* .item {
    margin-bottom: 18px;
} */

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 5px;
}

.tagclass {
    margin-left: 5px;
    color: black;
    border: none;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: #c6e2ff
}
</style>